import React, { useState, useCallback } from 'react';
import SubmitButton from './useCallbackChild'

export default function CallbackForm() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  const handleAdd1 = () => {
    setCount1(count1 + 1);
  }

  // 调用 useCallback 返回一个 memoized 回调，该回调在依赖项更新时才会更新
  const handleAdd2 = useCallback(() => {
    setCount2(count2 + 1);
  }, [count2]);

  return (
    <>
      <div>
        <h2>useCallback</h2>
        <p>count1: {count1}</p>
        {/* 两种传递参数的方式都可以 */}
        <SubmitButton onButtonClick={handleAdd1} children='button1'></SubmitButton>
      </div>
      <div>
        <p>count2: {count2}</p>
        <SubmitButton onButtonClick={handleAdd2}>button2</SubmitButton>
      </div>
    </>
  )
}
